<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button type="button" id="btn"> 查询 </button>
    <!-- 在需要使用的地方引入 -->
<script src="./js/jquery-3.7.1.js" type="text/javascript" charset="utf-8"></script>

<!-- 
    jquery调用ajax的方法
        格式：$.ajax({});
            参数：
                type: 请求方式 GET / POST
                url: 请求地址url
                asyn: 是否异步，默认是true表示异步
                data：发送到服务器的数据
                dataType：预期服务器返回的数据类型
                contentType：设置请求头
                success：请求成功时调用此函数
                error：请求失败时调用此函数
-->
<script type="text/javascript">

// 绑定点击事件
    $("#btn").click(function(){
        $.ajax({
        type: 'get', // 请求方式
        url: 'js/data.json', // 请求地址
        data: {
            username: "zhangsan"  // 如果没有参数，则不需要设置
        },
        dataType: "json", // 预期返回的数据类型
        // 请求成功时调用的函数
        success:function(data){ // data是形参名，代表的是返回的数据
            console.log(data);  // 字符串
            // var obj = JSON.parse(data);
            // console.log(obj)
            // dom操作
            // 创建url
            var ul = $("<ur></ur>");
            // 遍历返回的数据数组
            for(var i =0; i < data.length; i++){
                // 得到数组中的每一个元素
                var user = data[i];
                // 创建li元素
                var li = "<li>" + user.code + "</li>";
                // 将li元素设置成ul元素中
                ul.append(li);
            }
            console.log(ul);
            // 将ul设置到body中
            $("body").append(ul)
        }
    })
    });


    // console.log 打印
    $.ajax({
        type: 'get', // 请求方式
        url: 'js/data.json', // 请求地址
        data: {
            username: "zhangsan"  // 如果没有参数，则不需要设置
        },
        dataType: "json", // 预期返回的数据类型
        // 请求成功时调用的函数
        success:function(data){ // data是形参名，代表的是返回的数据
            console.log(data);  // 字符串
            // var obj = JSON.parse(data);
            // console.log(obj)
            // dom操作
            // 创建url
            var ul = $("<ur></ur>");
            // 遍历返回的数据数组
            for(var i =0; i < data.length; i++){
                // 得到数组中的每一个元素
                var user = data[i];
                // 创建li元素
                var li = "<li>" + user.code + "</li>";
                // 将li元素设置成ul元素中
                ul.append(li);
            }
            console.log(ul);
            // 将ul设置到body中
            $("body").append(ul)
        }
    })
</script>
</body>
</html>